<template>
  <div class="topo-devices-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">
          设备管理
        </h1>
        <!-- <p class="page-desc">管理拓扑设备库,包含设备信息、总线配置和脆弱性数据</p> -->
    </div>
      <div class="header-actions">
        <el-button type="success" icon="Plus">
        添加设备
      </el-button>
        <el-button type="primary" icon="Upload">
        批量导入
      </el-button>
        <el-button type="primary" icon="Download">
          导出设备
      </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="summary-cards">
      <div class="summary-card total">
        <div class="card-icon">
          <el-icon><Cpu /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-value">42</div>
          <div class="card-label">设备总数</div>
        </div>
      </div>
      <div class="summary-card configured">
        <div class="card-icon">
          <el-icon><Check /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-value">35</div>
          <div class="card-label">已配置</div>
        </div>
      </div>
      <div class="summary-card high-risk">
        <div class="card-icon">
          <el-icon><Warning /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-value">12</div>
          <div class="card-label">高风险</div>
        </div>
      </div>
      <div class="summary-card vulnerabilities">
        <div class="card-icon">
          <el-icon><WarningFilled /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-value">28</div>
          <div class="card-label">已知漏洞</div>
        </div>
      </div>
    </div>

    <!-- 搜索和过滤区域 -->
    <el-card class="search-card">
      <div class="search-section">
        <div class="search-filters">
        <el-input
          v-model="searchKeyword"
            placeholder="搜索设备名称、型号、厂商..."
          prefix-icon="Search"
            clearable
            class="search-input"
          />
          <el-select v-model="deviceType" placeholder="全部类型" clearable class="filter-select">
            <el-option label="全部类型" value="" />
          <el-option label="路由器" value="router" />
          <el-option label="交换机" value="switch" />
          <el-option label="服务器" value="server" />
          <el-option label="防火墙" value="firewall" />
            <el-option label="工控设备" value="industrial" />
          </el-select>
          <el-select v-model="busType" placeholder="全部总线" clearable class="filter-select">
            <el-option label="全部总线" value="" />
            <el-option label="Modbus" value="modbus" />
            <el-option label="PROFINET" value="profinet" />
            <el-option label="Ethernet/IP" value="ethernet-ip" />
            <el-option label="OPC UA" value="opc-ua" />
            <el-option label="DNP3" value="dnp3" />
          </el-select>
          <el-select v-model="riskLevel" placeholder="全部风险" clearable class="filter-select">
            <el-option label="全部风险" value="" />
            <el-option label="低风险" value="low" />
            <el-option label="中风险" value="medium" />
            <el-option label="高风险" value="high" />
            <el-option label="极高风险" value="critical" />
        </el-select>
        </div>
        <div class="search-actions">
          <el-button type="primary" icon="Search">
            Q 搜索
          </el-button>
          <el-button icon="Refresh">
            重置
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 设备列表 -->
    <el-card class="table-card">
      <template #header>
        <div class="table-header">
          <div class="header-left">
            <el-icon><List /></el-icon>
            <span>设备列表</span>
            <span class="device-count">共42个设备</span>
          </div>
          <div class="header-right">
            <div class="view-toggles">
              <el-button size="small" type="primary" icon="Grid" />
              <el-button size="small" icon="List" />
            </div>
            <el-button size="small" type="danger" icon="Delete">
              批量删除
            </el-button>
          </div>
        </div>
      </template>
      
      <el-table
        :data="filteredDevices"
        v-loading="loading"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="设备信息" min-width="200">
          <template #default="{ row }">
            <div class="device-info">
              <div class="device-name">{{ row.name }}</div>
              <div class="device-details">
                <span>型号: {{ row.model }}</span>
                <span>厂商: {{ row.manufacturer }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="类型/总线" width="150" align="center">
          <template #default="{ row }">
            <div class="type-bus">
              <el-tag size="small" :type="getDeviceTypeTagType(row.type)">
              {{ getDeviceTypeName(row.type) }}
            </el-tag>
              <div class="bus-type">{{ row.busType }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="脆弱性" width="120" align="center">
          <template #default="{ row }">
            <div class="vulnerability-info">
              <span class="vuln-count">{{ row.vulnerabilityCount }}</span>
              <span class="vuln-label">个漏洞</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="风险等级" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="getRiskLevelTagType(row.riskLevel)" size="small">
              {{ getRiskLevelName(row.riskLevel) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="160" align="center" />
        <el-table-column label="操作" width="150" align="center" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" size="small">
              查看
            </el-button>
            <el-button link type="warning" size="small">
              编辑
            </el-button>
            <el-button link type="danger" size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <div class="pagination-info">
          显示 1 - 10 条, 共 42 条记录
        </div>
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50]"
          :total="pagination.total"
          layout="prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Setting, Cpu, Check, Warning, WarningFilled, List, Grid } from '@element-plus/icons-vue'

// 搜索和过滤
const searchKeyword = ref('')
const deviceType = ref('')
const busType = ref('')
const riskLevel = ref('')

// 加载状态
const loading = ref(false)

// 分页
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 42
})

// 选中的设备
const selectedDevices = ref([])

// 设备数据
const devices = ref([
  {
    id: 1,
    name: '工业路由器RT-001',
    model: 'RT-2000',
    manufacturer: '西门子',
    type: 'router',
    busType: 'Modbus',
    vulnerabilityCount: 3,
    riskLevel: 'high',
    updateTime: '2024-06-01 10:30'
  },
  {
    id: 2,
    name: '智能交换机SW-001',
    model: 'SW-3000',
    manufacturer: '施耐德',
    type: 'switch',
    busType: 'PROFINET',
    vulnerabilityCount: 2,
    riskLevel: 'medium',
    updateTime: '2024-06-01 09:15'
  },
  {
    id: 3,
    name: '工控服务器SRV-001',
    model: 'SRV-5000',
    manufacturer: '罗克韦尔',
    type: 'server',
    busType: 'Ethernet/IP',
    vulnerabilityCount: 5,
    riskLevel: 'critical',
    updateTime: '2024-06-01 08:45'
  },
  {
    id: 4,
    name: '防火墙FW-001',
    model: 'FW-1000',
    manufacturer: '思科',
    type: 'firewall',
    busType: 'OPC UA',
    vulnerabilityCount: 1,
    riskLevel: 'low',
    updateTime: '2024-06-01 07:20'
  },
  {
    id: 5,
    name: 'PLC控制器PLC-001',
    model: 'PLC-4000',
    manufacturer: '三菱',
    type: 'industrial',
    busType: 'DNP3',
    vulnerabilityCount: 4,
    riskLevel: 'high',
    updateTime: '2024-06-01 06:10'
  },
  {
    id: 6,
    name: 'HMI人机界面HMI-001',
    model: 'HMI-2000',
    manufacturer: '欧姆龙',
    type: 'industrial',
    busType: 'Modbus',
    vulnerabilityCount: 2,
    riskLevel: 'medium',
    updateTime: '2024-06-01 05:30'
  },
  {
    id: 7,
    name: '数据采集器DAQ-001',
    model: 'DAQ-3000',
    manufacturer: '研华',
    type: 'industrial',
    busType: 'PROFINET',
    vulnerabilityCount: 3,
    riskLevel: 'high',
    updateTime: '2024-06-01 04:15'
  },
  {
    id: 8,
    name: '网络摄像头CAM-001',
    model: 'CAM-1000',
    manufacturer: '海康威视',
    type: 'industrial',
    busType: 'Ethernet/IP',
    vulnerabilityCount: 6,
    riskLevel: 'critical',
    updateTime: '2024-06-01 03:45'
  },
  {
    id: 9,
    name: '传感器网关GW-001',
    model: 'GW-5000',
    manufacturer: '霍尼韦尔',
    type: 'industrial',
    busType: 'OPC UA',
    vulnerabilityCount: 1,
    riskLevel: 'low',
    updateTime: '2024-06-01 02:20'
  },
  {
    id: 10,
    name: '监控工作站WS-001',
    model: 'WS-4000',
    manufacturer: '艾默生',
    type: 'server',
    busType: 'DNP3',
    vulnerabilityCount: 2,
    riskLevel: 'medium',
    updateTime: '2024-06-01 01:10'
  }
])

// 过滤后的设备数据
const filteredDevices = computed(() => {
  let filtered = devices.value

  // 关键词搜索
  if (searchKeyword.value) {
    filtered = filtered.filter(device => 
      device.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      device.model.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      device.manufacturer.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }

  // 设备类型过滤
  if (deviceType.value) {
    filtered = filtered.filter(device => device.type === deviceType.value)
  }

  // 总线类型过滤
  if (busType.value) {
    filtered = filtered.filter(device => device.busType.toLowerCase() === busType.value)
  }

  // 风险等级过滤
  if (riskLevel.value) {
    filtered = filtered.filter(device => device.riskLevel === riskLevel.value)
  }

  return filtered
})

// 获取设备类型标签类型
const getDeviceTypeTagType = (type) => {
  const typeMap = {
    'router': 'primary',
    'switch': 'success',
    'server': 'warning',
    'firewall': 'danger',
    'industrial': 'info'
  }
  return typeMap[type] || 'default'
}

// 获取设备类型名称
const getDeviceTypeName = (type) => {
  const nameMap = {
    'router': '路由器',
    'switch': '交换机',
    'server': '服务器',
    'firewall': '防火墙',
    'industrial': '工控设备'
  }
  return nameMap[type] || type
}

// 获取风险等级标签类型
const getRiskLevelTagType = (level) => {
  const levelMap = {
    'low': 'success',
    'medium': 'warning',
    'high': 'danger',
    'critical': 'danger'
  }
  return levelMap[level] || 'default'
}

// 获取风险等级名称
const getRiskLevelName = (level) => {
  const nameMap = {
    'low': '低风险',
    'medium': '中风险',
    'high': '高风险',
    'critical': '极高风险'
  }
  return nameMap[level] || level
}

// 选择变化处理
const handleSelectionChange = (selection) => {
  selectedDevices.value = selection
}

// 分页处理
const handleSizeChange = (size) => {
  pagination.value.pageSize = size
  pagination.value.currentPage = 1
}

const handleCurrentChange = (page) => {
  pagination.value.currentPage = page
}

// 页面初始化
onMounted(() => {
  console.log('设备管理页面已加载')
})
</script>

<style lang="scss" scoped>
.topo-devices-container {
  min-height: calc(100vh - 50px);
}

// 页面头部
  .header-left {
  .page-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 10px 0;
      color: var(--text-color);
      font-size: 28px;
      font-weight: 600;
  }
  
  .page-desc {
    margin: 0;
      color: var(--text-color-secondary);
      font-size: 14px;
    }
  }

  .header-actions {
    display: flex;
    gap: 10px;
  }


// 统计卡片
.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;

  .summary-card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    border: var(--card-border);
    gap: 15px;

    .card-icon {
      width: 50px;
      height: 50px;
      border-radius: 8px;
  display: flex;
  align-items: center;
      justify-content: center;
      font-size: 24px;
      color: white;

      &.total {
        background: linear-gradient(135deg, #5cb3ff, #3b82f6);
      }

      &.configured {
        background: linear-gradient(135deg, #4ade80, #10b981);
      }

      &.high-risk {
        background: linear-gradient(135deg, #f87171, #ef4444);
      }

      &.vulnerabilities {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
      }
    }

    .card-content {
      flex: 1;

      .card-value {
        font-size: 28px;
        font-weight: bold;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 5px;
      }

      .card-label {
        font-size: 14px;
        color: var(--text-color-secondary);
      }
    }
  }
}

// 搜索卡片
.search-card {
  margin-bottom: 20px;
  
  .search-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    .search-filters {
      display: flex;
      gap: 15px;
      flex: 1;

      .search-input {
        width: 300px;
      }

      .filter-select {
        width: 150px;
      }
    }

    .search-actions {
      display: flex;
      gap: 10px;
    }
  }
}

// 表格卡片
.table-card {
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header-left {
      display: flex;
      align-items: center;
      gap: 10px;

      .device-count {
        color: var(--text-color-secondary);
        font-size: 14px;
      }
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 15px;

      .view-toggles {
        display: flex;
        gap: 5px;
      }
    }
  }

  .device-info {
    .device-name {
      font-weight: 600;
      color: var(--text-color);
      margin-bottom: 5px;
    }

    .device-details {
      font-size: 12px;
      color: var(--text-color-secondary);

      span {
        margin-right: 15px;
      }
    }
  }

  .type-bus {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;

    .bus-type {
      font-size: 12px;
      color: var(--text-color-secondary);
    }
  }

  .vulnerability-info {
    display: flex;
    flex-direction: column;
    align-items: center;

    .vuln-count {
      font-size: 18px;
      font-weight: bold;
      color: var(--text-color);
    }

    .vuln-label {
      font-size: 12px;
      color: var(--text-color-secondary);
    }
}

.pagination-wrapper {
  display: flex;
    justify-content: space-between;
    align-items: center;
  margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--el-border-color-lighter);

    .pagination-info {
      color: var(--text-color-secondary);
      font-size: 14px;
    }
  }
}

// 响应式适配
@media (max-width: 1200px) {
  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .search-section {
    flex-direction: column;
    align-items: stretch;

    .search-filters {
      flex-direction: column;

      .search-input,
      .filter-select {
        width: 100%;
      }
    }
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 20px;

    .header-actions {
      width: 100%;
      justify-content: flex-start;
    }
  }

  .summary-cards {
    grid-template-columns: 1fr;
  }
}
</style> 